<template>
  <div class="new-container">
    <div class="header">
      <van-nav-bar title="最新上架" left-text="返回" left-arrow @click-left="$router.back()"></van-nav-bar>
    </div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list offset="0" :immediate-check="false" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <!-- 其他商品 -->
        <div class="another-container">
          <div class="another-list">
            <goods-item v-for="an in goodsList" :key="an.id" :goods_img="an.goods_img" :goods_name="an.goods_name" :goods_price="an.goods_price" :id="an.id"></goods-item>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import axios from '@/utils/request/request'
import { Notify } from 'vant'
import GoodsItem from '../publicComponent/GoodsItem.vue'
export default {
  name: 'new',
  data() {
    return {
      page: 1,
      goodsList: [],
      isLoading: false,
      loading: false,
      finished: false
    }
  },
  components: {
    GoodsItem
  },
  methods: {
    // 前往商品详情页
    toDetail(id) {
      this.$router.push('/goods/detail/' + id)
    },
    // 处理价格
    dealPrice(price) {
      const priceArr = price.toFixed(2).split('.')
      return priceArr
    },
    // 获取最新商品
    async getNewGoodsList() {
      if (this.page === 1) {
        this.$toast.loading({
          message: '加载中...',
          duration: 0
        })
      }
      try {
        const data = await axios.get('/api/user/new/goods', {
          params: {
            page: this.page
          }
        })

        if (this.loading) {
          this.loading = false
        }
        if (data.code === 0) {
          this.goodsList = [...this.goodsList, ...data.data]
          if (data.data.length < 10) {
            this.finished = true
          }
        } else {
          Notify({
            type: 'danger',
            message: data.msg,
            duration: 1000
          })
        }
      } catch {
        Notify({
          type: 'danger',
          message: '获取最新商品数据失败！',
          duration: 1000
        })
      } finally {
        this.$toast.clear()
      }
    },
    // 上拉加载
    onLoad() {
      this.page++
      this.getNewGoodsList()
    },
    // 下拉刷新
    async onRefresh() {
      this.page = 1
      this.goodsList = []
      this.getNewGoodsList()
      this.isLoading = false
    }
  },
  created() {
    this.getNewGoodsList()
  }
}
</script>

<style lang="less" scoped>
.new-container {
  padding-top: 46px;
  min-height: 100vh;
  background-color: #f5f5f5;

  .header {
    position: fixed;
    top: 0;
    left: 0;
    height: 46px;
    border-bottom: 1px solid #f1f1f1;
    width: 100vw;
    z-index: 999;
    ::v-deep .van-nav-bar .van-icon,
    ::v-deep .van-nav-bar__text {
      color: #323232;
    }
  }
  .another-container {
    background-color: #f1f1f1;
    padding: 0 10px;
    .another-list {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }
  }
}
</style>
